<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读书笔记 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部导航 -->
        <nav class="px-4 py-2 flex items-center border-b">
            <a href="features.html" class="text-gray-600">
                <i class="fas fa-chevron-left text-xl"></i>
            </a>
            <h1 class="flex-1 text-center font-semibold">读书笔记</h1>
            <button class="text-blue-500">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </nav>

        <!-- 书籍列表 -->
        <div class="px-4 py-4">
            <!-- 正在阅读 -->
            <div class="mb-6">
                <h2 class="text-lg font-semibold mb-3">正在阅读</h2>
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <div class="flex items-start">
                        <img src="https://via.placeholder.com/100x140" alt="书籍封面" class="w-20 h-28 rounded-lg object-cover">
                        <div class="ml-4 flex-1">
                            <h3 class="font-medium">人工智能简史</h3>
                            <p class="text-gray-500 text-sm mt-1">尼克·波斯特罗姆</p>
                            <div class="mt-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-500">阅读进度</span>
                                    <span class="text-blue-500">68%</span>
                                </div>
                                <div class="mt-1 bg-gray-200 rounded-full h-1.5">
                                    <div class="bg-blue-500 h-1.5 rounded-full" style="width: 68%"></div>
                                </div>
                            </div>
                            <button class="mt-3 text-sm text-blue-500">继续阅读</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 笔记列表 -->
            <div>
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-semibold">我的笔记</h2>
                    <div class="flex items-center space-x-2">
                        <button class="text-gray-500">
                            <i class="fas fa-sort text-sm"></i>
                        </button>
                        <button class="text-gray-500">
                            <i class="fas fa-filter text-sm"></i>
                        </button>
                    </div>
                </div>
                <div class="space-y-4">
                    <!-- 笔记卡片 -->
                    <div class="bg-white rounded-xl p-4">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">第三章</span>
                            <span class="text-xs text-gray-400">2024-04-10</span>
                        </div>
                        <h3 class="font-medium mt-2">AI发展的三个重要阶段</h3>
                        <p class="text-gray-600 text-sm mt-2 line-clamp-3">
                            1. 规则基础阶段：基于人工编写的规则进行决策
                            2. 机器学习阶段：通过数据训练模型
                            3. 深度学习阶段：模拟人脑神经网络...
                        </p>
                        <div class="flex items-center mt-3 space-x-4">
                            <button class="text-gray-500 text-sm">
                                <i class="far fa-edit mr-1"></i>
                                编辑
                            </button>
                            <button class="text-gray-500 text-sm">
                                <i class="far fa-share-square mr-1"></i>
                                分享
                            </button>
                        </div>
                    </div>

                    <!-- AI助手笔记 -->
                    <div class="bg-blue-50 rounded-xl p-4">
                        <div class="flex items-center">
                            <i class="fas fa-robot text-blue-500 mr-2"></i>
                            <span class="text-blue-500 text-sm">AI助手笔记</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-2">
                            根据您的阅读进度，AI助手为您总结了以下要点：
                        </p>
                        <ul class="text-sm text-gray-600 mt-2 space-y-1 list-disc list-inside">
                            <li>深度学习是AI发展的重要突破点</li>
                            <li>数据和算力是推动AI发展的关键因素</li>
                            <li>AI的发展呈现出加速趋势</li>
                        </ul>
                        <button class="mt-3 text-sm text-blue-500">
                            生成完整笔记
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部工具栏 -->
        <div class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t">
            <div class="flex justify-around">
                <button class="text-gray-400">
                    <i class="fas fa-book text-xl"></i>
                </button>
                <button class="text-blue-500">
                    <i class="fas fa-pen text-xl"></i>
                </button>
                <button class="text-gray-400">
                    <i class="fas fa-folder text-xl"></i>
                </button>
                <button class="text-gray-400">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </div>
</body>
</html> 
